<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" media="screen" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/global.css" media="all"/>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>


<div class="page-container">
    <div class="col-md-6">
        <button data-type="getCheckData" type="button" class="layui-btn layui-btn-sm" id="addRole"><i
                class="layui-icon"></i>新增
        </button>
        <button data-type="getCheckData" type="button" class="layui-btn layui-btn-sm" id="delRole"><i
                class="layui-icon"></i>删除
        </button>
        <table class="layui-hide" id="role" lay-filter="role"></table>
    </div>
    <div class="col-md-6" style="position: relative">
        <div style="height: 30px;line-height: 30px;text-align: center;font-weight: bold">权限列表</div>
        <p id="tip" style="text-align: center;margin-top: 200px">请在左侧，双击展示权限列表</p>
        <table class="layui-hide" id="purview" lay-filter="purview"></table>
    </div>
</div>


<div class="layui-row" id="popSearchRoleTest" style="display:none;">
    <div class="">
        <form class="layui-form form-container">

            <div class="layui-form-item">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-block" style="width: 300px;margin-left: 150px">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色描述</label>
                <div class="layui-input-block" style="width: 300px;margin-left: 150px">
                    <input type="text" name="description" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 150px">
                    <button class="layui-btn" lay-submit lay-filter="saveBtn">提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">删除</button>
    </div>
</script>

<script type="text/html" id="itemTpl">
    {{# if( d.status == 0){ }}
    <button style="background-color: #2e6da4!important;" type="button" lay-event="open" class="layui-btn layui-btn-sm"
            id="open"><i class="layui-icon"></i>启用
    </button>
    {{# } }}

    {{# if( d.status == 1){ }}
    <button type="button" lay-event="coles" class="layui-btn layui-btn-sm" id="coles"><i class="layui-icon"></i>禁用
    </button>
    {{# } }}
</script>


<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/libs/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../js/jq.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

    var winH = $(window).height()

    var leftTable = function () {
        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#role'
                , url: '/roles/getList'
                , page: true
                , limit: 10
                , height: winH - 56
                , limits: [3, 5, 10]
                , cols: [[
                    {type: 'radio', width: '10%'}
                    , {field: 'name', title: '角色', width: '40%', sort: true}
                    , {field: 'description', title: '角色描述', width: '50%'}
                    , {field: 'id', title: 'id', width: 120, hide: true}
                ]],
                done: function (res, curr, count) {
                    $('th').css({'font-weight': 'bold'});
                }

            });
            var rol = '';
            table.on('toolbar(role)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态

                if (obj.config.id === null || obj.config.id === '') {
                    layer.msg('请选择要操作的角色');

                }

                switch (obj.event) {
                    case 'getCheckData':
                        var res = checkStatus.data;//获取选中行数据
                        for (var i = 0; i < res.length; i++) {
                            rol = res[i];
                        }
                }
                ;


            });

            var active = {
                getCheckData: function () {
                    var checkStatus = table.checkStatus('role'),
                        data = checkStatus.data;
                    return data
                }
            }

            $("#delRole").click(function () {
                var type = $(this).data('type')
                var data = active[type] ? active[type].call(this) : '';

                var rol = data[0];
                console.log(rol)
                if (rol === '' || rol === null || rol === undefined) {
                    layer.msg('请选择一条数据！');
                } else {
                    // 删除选中行
                    $.ajax({
                        type: 'post',
                        url: '/roles/deleteRole',
                        contentType: "application/json; charset=utf-8",
                        dataType: 'json',
                        data: JSON.stringify(rol),
                        success: function (res) {
                            if (res.errorCode === 0) {
                                window.location.reload();
                                layer.msg('删除成功！', {icon: 1});
                            } else {
                                layer.msg(res.errorMsg, {icon: 2});
                            }
                        }
                    })
                }
            })

            $("#addRole").click(function () {
                layer.open({
                    type: 1,
                    title: ['新增角色', 'font-weight:bold;font-size:18px;height:50px'],
                    shadeClose: true,
                    shade: 0.7,
                    area: ['550px', '350px'],
                    content: $("#popSearchRoleTest").html()
                });

            })
        });
    }

    var rightTable = function () {
        layui.use('table', function () {
            var table = layui.table;
            var roleid = '';
            //监听行单击事件（双击事件为：rowDouble）
            table.on('rowDouble(role)', function (obj) {
                $('#tip').hide()
                var data = obj.data;

                //标注选中样式
                obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
                if (data !== null) {
                    roleid = data.id;
                    layui.use('table', function () {
                        var table2 = layui.table;
                        table2.render({
                            elem: '#purview'
                            , url: '/roles/getPurviewList'
                            , page: true
                            , limit: 20
                            , height: winH - 56
                            , limits: [5, 10, 15, 20]
                            , where: {
                                id: roleid,
                            }
                            , cols: [[
                                {field: 'id', title: 'id', width: '50%', hide: true}
                                , {field: 'parentid', title: 'parentid', width: '50%', hide: true}
                                , {field: 'name', title: '菜单名称', width: '80%'}
                                , {
                                    field: '', title: '操作',
                                    align: 'center',
                                    width: '20%',
                                    toolbar: '#itemTpl',
                                    fixed: 'right' //固定列
                                }
                            ]]
                            , done: function (res, curr, count) {
                                $('th').css({'font-weight': 'bold'});
                            }
                        });
                    });
                }

                //监听行工具事件
                table.on('tool(purview)', function (obj) {

                    var data = obj.data;

                    if (obj.event === 'coles') {
                        var id = data.id;
                        var pid = data.parentid;
                        console.log(pid)
                        $.ajax({
                            url: '/roles/coles?roleid=' + roleid + "&pid=" + id + "&parentId=" + pid,
                            type: 'get',
                            success: function () {
                                layer.msg("已关闭", {
                                    icon: 1,
                                    time: 1000
                                });
                                table.reload("purview");
                            }
                        })
                    }
                    if (obj.event === 'open') {
                        var id = data.id;
                        var pid = data.parentid;
                        console.log(pid)
                        $.ajax({
                            url: '/roles/open?roleid=' + roleid + "&pid=" + id + "&parentId=" + pid,
                            type: 'get',
                            success: function () {
                                layer.msg("已启用", {
                                    icon: 1,
                                    time: 1000
                                });
                                table.reload("purview");
                            }
                        })
                    }
                });


            });
        })
    }


    var pageInit = function () {
        leftTable();
        rightTable();
    }

    // 保存角色
    layui.use(['form', 'table'], function () {
        var form = layui.form;
        var table = layui.table;
        form.on('submit(saveBtn)', function (data) {

            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '/roles/save',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(data.field),
                success: function (res) {

                    if (res.errorCode === 0) {
                        table.reload('role')
                        layer.close(layer.index)
                    } else {
                        layer.msg(res.errorMsg, {icon: 2});
                    }
                }
            })

            return false
        });
    })


    $(function () {
        pageInit();
        $(window).resize(function () {

        })
    })
</script>
</body>

</html>























